<template>
  <view class="upgrade-page">
    <!-- 全屏视差背景 -->
    <view class="particles">
      <view v-for="(particle, i) in particles" :key="i" 
            class="particle" 
            :style="{
              left: `${particle.x}%`,
              top: `${particle.y}%`,
              width: `${particle.size}px`,
              height: `${particle.size}px`,
              background: particle.color,
              opacity: particle.opacity,
              animationDelay: `${particle.delay}s`
            }"></view>
    </view>
    
    <!-- 玻璃态卡片 -->
    <view class="glass-card">
      <view class="card-header">
        <text class="title">专升本服务</text>
        <view class="glowing-line"></view>
      </view>
	  
      
      <view class="tab-bar">
        <view v-for="(tab, i) in tabs" 
              :key="i" 
              class="tab-item"
              :class="{active: activeTab === tab.id}"
              @click="switchTab(tab.id)">
          <text>{{tab.title}}</text>
          <view class="indicator"></view>
        </view>
      </view>
      
      <!-- 院校库 -->
      <view class="tab-content college-list" v-if="activeTab === 'colleges'">
       <!-- <view class="search-box">
          <uni-search-bar 
            placeholder="搜索院校名称" 
            radius="100" 
            clearButton="auto"
            v-model="searchKeyword"
            @confirm="searchColleges"
          ></uni-search-bar>
        </view> -->
        
        <scroll-view 
          class="college-container"
          scroll-y
          @scrolltolower="loadMoreColleges"
          :style="{height: scrollViewHeight + 'px'}"
        >
          <view v-for="(college, i) in filteredColleges" 
                :key="i" 
                class="college-item"
                @click="viewCollegeDetail(college.id,college.name)">
            <image :src="college.logo" mode="aspectFit" class="college-logo"></image>
            <view class="college-info">
              <text class="name">{{college.name}}</text>
              <view class="meta">
                <text class="major">{{college.content}}</text>
              </view>
              <!-- <view class="apply-status" v-if="college.applyStatus">
                <text :class="['status', college.applyStatus]">
                  {{applyStatusText[college.applyStatus]}}
                </text>
              </view> -->
            </view>
            <uni-icons type="right" size="18" color="#999"></uni-icons>
          </view>
          
          <!-- 加载更多提示 -->
          <view class="load-more" v-if="loading">
            <image src="/static/loading.gif" class="loading-icon"></image>
            <text>加载中...</text>
          </view>
          <view class="no-more" v-if="noMoreData && filteredColleges.length > 0">
            <text>没有更多院校了</text>
          </view>
        </scroll-view>
      </view>
      
      <!-- 政策解读 -->
      <view class="tab-content policy-list" v-if="activeTab === 'policy'">
        <view class="policy-section">
          <view class="section-title">
            <text>报名条件</text>
          </view>
          <view class="section-content">
            <text>1. 应届专科毕业生或已取得专科毕业证书的学生</text>
            <text>2. 在校期间表现良好，无违纪记录</text>
            <text>3. 通过学校组织的专升本选拔考试</text>
          </view>
        </view>
        
        <view class="policy-section">
          <view class="section-title">
            <text>报名流程</text>
          </view>
          <view class="timeline">
            <view class="timeline-item" v-for="(step, i) in applySteps" :key="i">
              <view class="timeline-dot"></view>
              <view class="timeline-content">
                <text class="timeline-date">{{step.date}}</text>
                <text class="timeline-title">{{step.title}}</text>
                <text class="timeline-desc">{{step.desc}}</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="quick-apply" @click="showApplyModal">
          <text>快速报名通道</text>
          <uni-icons type="forward" size="18" color="#fff"></uni-icons>
        </view>
      </view>
      
      <!-- 备考资料 -->
      <view class="tab-content materials" v-if="activeTab === 'materials'">
        <view class="material-category">
          <view class="category-title">
            <text>考试大纲</text>
          </view>
          <view class="material-list">
            <view class="material-item" v-for="(item, i) in examOutline" :key="i" @click="previewMaterial(item)">
              <image src="/static/file-icon.png" class="material-icon"></image>
              <view class="material-info">
                <text class="material-name">{{item.name}}</text>
                <text class="material-size">{{item.size}}</text>
              </view>
              <view class="download-btn">
                <text>下载</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="material-category">
          <view class="category-title">
            <text>历年真题</text>
          </view>
          <view class="material-list">
            <view class="material-item" v-for="(item, i) in pastPapers" :key="i" @click="previewMaterial(item)">
              <image src="/static/file-icon.png" class="material-icon"></image>
              <view class="material-info">
                <text class="material-name">{{item.name}}</text>
                <text class="material-size">{{item.size}}</text>
              </view>
              <view class="download-btn">
                <text>下载</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 报名弹窗 -->
    <uni-popup ref="applyPopup" type="bottom" :mask-click="false">
      <view class="apply-popup">
        <view class="popup-header">
          <text class="popup-title">专升本报名</text>
          <uni-icons type="close" size="22" color="#999" @click="closeApplyModal"></uni-icons>
        </view>
        
        <scroll-view class="form-container" scroll-y>
          <view class="form-item">
            <text class="form-label">姓名</text>
            <input class="form-input"
			 
			 v-model="applyForm.name" placeholder="请输入真实姓名" />
          </view>
          
          <view class="form-item">
            <text class="form-label">身份证号</text>
            <input class="form-input" v-model="applyForm.idCard" 
			placeholder="请输入18位身份证号码" 
			 @blur="validateIdCard"
			 maxlength="18"
			 />
          </view>
          <text v-if="idCardError" class="error-message">{{ idCardError }}</text>
          <view class="form-item">
            <text class="form-label">专科学校</text>
            <input class="form-input" v-model="applyForm.college" placeholder="请输入所在专科学校" />
          </view>
          
          <view class="form-item">
            <text class="form-label">专业</text>
            <input class="form-input" v-model="applyForm.major" placeholder="请输入专科专业" />
          </view>
          
          <view class="form-item">
            <text class="form-label">学校</text>
            <picker class="form-input" mode="selector" :range="collegeOptions" range-key="name" @change="selectCollege">
              <view>{{applyForm.targetCollege || '请选择学校'}}</view>
            </picker>
          </view>
          <view class="form-item">
            <text class="form-label">微信</text>
            <input class="form-input" v-model="applyForm.wx" placeholder="请输入联系电话" type="number" />
          </view>
          <view class="form-item">
            <text class="form-label">联系电话</text>
            <input class="form-input" v-model="applyForm.phone" placeholder="请输入联系电话" type="number" />
          </view>
          
          <view class="form-item">
            <text class="form-label">电子邮箱</text>
            <input class="form-input" v-model="applyForm.email" placeholder="请输入电子邮箱" type="email" />
          </view> 
        </scroll-view>
        
        <view class="popup-footer">
          <button style="line-height: 50rpx;" class="submit-btn"  @click="submitApply">提交报名</button>
        </view>
      </view>
    </uni-popup>
    
    <!-- 报名成功弹窗 -->
    <uni-popup ref="successPopup" type="center">
      <view class="success-popup">
        <text class="success-title">报名成功</text>
        <text class="success-desc">我们已收到您的报名信息，将在3个工作日内联系您</text>
        <button style="margin-top: 35rpx;" class="success-btn" @click="closeSuccessPopup">确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'colleges',
      tabs: [
        {id: 'colleges', title: '院校库'},
        {id: 'policy', title: '政策解读'},
        // {id: 'materials', title: '备考资料'}
      ],
      activeTag: 'all',
      tags: [
        {id: 'all', name: '全部'},
        {id: '211', name: '211院校'},
        {id: 'public', name: '公办院校'},
        {id: 'private', name: '民办院校'},
        {id: 'local', name: '本地院校'}
      ],
      searchKeyword: '',
      colleges: [],
      filteredColleges: [],
      particles: [],
      scrollViewHeight: 0,
      currentPage: 1,
      pageSize: 10,
      loading: false,
      noMoreData: false,
      
      // 报名状态文本
      applyStatusText: {
        none: '立即报名',
        applied: '已报名',
        pending: '审核中',
        approved: '已通过',
        rejected: '未通过'
      },
	  idCardError:'',
      // 报名流程时间线
      applySteps: [
        {
          date: '3月1日-3月15日',
          title: '网上报名',
          desc: '登录教育考试院网站填写报名信息'
        },
        {
          date: '3月20日-3月25日',
          title: '资格审核',
          desc: '学校对报名学生进行资格审核'
        },
        {
          date: '4月10日',
          title: '准考证打印',
          desc: '通过审核的学生打印准考证'
        },
        {
          date: '4月15日',
          title: '统一考试',
          desc: '参加全省统一专升本考试'
        },
        {
          date: '5月中旬',
          title: '成绩公布',
          desc: '考试成绩查询'
        }
      ],
      
      // 备考资料
      examOutline: [
        {name: '2023年专升本考试大纲.pdf', size: '2.4MB', url: ''},
        {name: '公共课考试说明.docx', size: '1.2MB', url: ''}
      ],
      pastPapers: [
        {name: '2022年专升本真题及答案.pdf', size: '3.1MB', url: ''},
        {name: '2021年专升本真题及答案.pdf', size: '3.0MB', url: ''},
        {name: '2020年专升本真题及答案.pdf', size: '2.9MB', url: ''}
      ],
      
      // 报名表单
      applyForm: {
        name: '',
        idCard: '',
        college: '',
        major: '',
        targetCollege: '',
        targetCollegeId: '',
        targetMajor: '',
        targetMajorId: '',
        phone: '',
        email: '',
        transcript: null,
        certificate: null,
        agreed: false,
		wx:''
      },
      
      // 院校和专业选项
      collegeOptions: [],
      majorOptions: []
	  
    }
  },
  computed: {
    // 是否可以提交报名
    canSubmit() {
      return (
        this.applyForm.name &&
        this.applyForm.idCard &&
        this.applyForm.college &&
        this.applyForm.major &&
        this.applyForm.targetCollege &&
        this.applyForm.targetMajor &&
        this.applyForm.phone &&
        this.applyForm.email &&
        this.applyForm.transcript &&
        this.applyForm.certificate &&
        this.applyForm.agreed
      )
    }
  },
  created() {
    this.generateParticles()
    // this.filteredColleges = [...this.colleges]
    // this.collegeOptions = this.colleges.map(c => ({id: c.id, name: c.name}))
  },
  onReady() {
    this.calculateScrollHeight()
  },
  onLoad() {
  	this.getStudentsSchool()
  },
  methods: {
	// 实时验证（失焦时）
	    validateIdCard() {
	      const idCard = this.applyForm.idCard.trim();
	      
	      // 空值校验
	      if (!idCard) {
	        this.idCardError = '请输入身份证号码';
	        return false;
	      }
	      
	      // 格式校验（18位，允许最后一位是X/x）
	      const idCardReg = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
	      if (!idCardReg.test(idCard)) {
	        this.idCardError = '身份证号码格式不正确';
	        return false;
	      }
	      
	      // 出生日期校验（可选，如需严格验证可添加）
	      
	      // 验证通过
	      this.idCardError = '';
	      return true;
	    },
	async getStudentsSchool() {
		const res = await this.$api.get('/StudentsSchool/index','',true)
		if(res.data.code === 200) {
			this.filteredColleges = res.data.data
			this.collegeOptions = res.data.data
			
		}
	},
    // 计算滚动区域高度
    calculateScrollHeight() {
      const query = uni.createSelectorQuery().in(this)
      query.select('.college-list').boundingClientRect(data => {
        const systemInfo = uni.getSystemInfoSync()
        this.scrollViewHeight = systemInfo.windowHeight - data.top - 10
      }).exec()
    },
    
    generateParticles() {
      const particles = []
      for (let i = 0; i < 30; i++) {
        particles.push({
          x: Math.random() * 100,
          y: Math.random() * 100,
          size: Math.random() * 6 + 2,
          color: `hsl(${Math.random() * 60 + 200}, 70%, 60%)`,
          opacity: Math.random() * 0.4 + 0.1,
          delay: Math.random() * 3
        })
      }
      this.particles = particles
    },
    
    // 切换标签
    switchTab(tabId) {
      this.activeTab = tabId
      if (tabId === 'colleges') {
        setTimeout(() => {
          this.calculateScrollHeight()
        }, 50)
      }
    },
    
    toggleTag(tagId) {
      this.activeTag = tagId
      
      if (tagId === 'all') {
        this.filteredColleges = [...this.colleges]
        return
      }
      
      this.filteredColleges = this.colleges.filter(college => {
        if (tagId === '211') return college.is211
        if (tagId === 'public') return college.isPublic
        if (tagId === 'private') return !college.isPublic
        if (tagId === 'local') return college.isLocal
        return true
      })
    },
    
    // 搜索院校
    searchColleges() {
      if (!this.searchKeyword.trim()) {
        this.filteredColleges = [...this.colleges]
        return
      }
      
      const keyword = this.searchKeyword.trim().toLowerCase()
      this.filteredColleges = this.colleges.filter(college => 
        college.name.toLowerCase().includes(keyword)
      )
    },
    
    // 加载更多院校
    loadMoreColleges() {
      if (this.loading || this.noMoreData) return
      
      this.loading = true
      // 模拟异步加载
      setTimeout(() => {
        const newColleges = [] // 这里应该是从API获取的新数据
        if (newColleges.length < this.pageSize) {
          this.noMoreData = true
        }
		this.getStudentsSchool()
        this.loading = false
      }, 1000)
    },
    
    // 查看院校详情
    viewCollegeDetail(id,name) {
      uni.navigateTo({
        url: `/pages/service/exam/detail/detail?id=${id}&name=${name}`
      })
    },
    
    // 显示报名弹窗
    showApplyModal() {
      this.$refs.applyPopup.open()
    },
    
    // 关闭报名弹窗
    closeApplyModal() {
      this.$refs.applyPopup.close()
    },
    
    // 选择报考院校
    selectCollege(e) {
      const index = e.detail.value
      this.applyForm.targetCollege = this.collegeOptions[index].name
      this.applyForm.targetCollegeId = this.collegeOptions[index].id
      
    },
    
    // 加载专业选项
    loadMajors(collegeId) {
      // 这里应该是从API获取该院校的专业列表
      this.majorOptions = [
        {id: 1, name: '计算机科学与技术'},
        {id: 2, name: '软件工程'},
        {id: 3, name: '电子信息工程'},
        {id: 4, name: '工商管理'}
      ]
    },
    
    // 选择报考专业
    selectMajor(e) {
      const index = e.detail.value
      this.applyForm.targetMajor = this.majorOptions[index].name
      this.applyForm.targetMajorId = this.majorOptions[index].id
    },
    
    // 上传文件
    chooseFile(type) {
      uni.chooseFile({
        count: 1,
        type: 'file',
        success: (res) => {
          const file = res.tempFiles[0]
          if (type === 'transcript') {
            this.applyForm.transcript = file
          } else {
            this.applyForm.certificate = file
          }
        }
      })
    },
    
    // 切换协议同意状态
    toggleAgreement(e) {
      this.applyForm.agreed = e.detail.value.length > 0
    },
    
    // 查看报名协议
    viewAgreement() {
      uni.navigateTo({
        url: '/pages/upgrade/agreement'
      })
    },
    
    // 提交报名
    async submitApply() {
      // if (!this.canSubmit) return
      if (!this.validateIdCard()) {
              return uni.showToast({
                title: '请检查身份证信息',
                icon: 'none'
              });
            }

      // 验证手机号
      if (!this.validatePhone(this.applyForm.phone)) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return
      }
      
      // 验证邮箱
      if (!this.validateEmail(this.applyForm.email)) {
        uni.showToast({
          title: '请输入正确的邮箱地址',
          icon: 'none'
        })
        return
      }
      
      // 显示加载中
      uni.showLoading({
        title: '提交中...',
        mask: true
      })
      const params = {
		  name:this.applyForm.name,
		  phone :this.applyForm.phone,
		  email:this.applyForm.email,
		  id_card:this.applyForm.idCard,
		  major:this.applyForm.major,
		  source:'微信小程序',
		  graduate_school:this.applyForm.college,
		  wx:this.applyForm.wx,
		  target_college:this.applyForm.targetCollege,
		  target_college_id:this.applyForm.targetCollegeId
	  }
	  const res = await this.$api.post('/StudentsSchool/submit',params,true)
	  if(res.data.code === 200) {
		  uni.hideLoading()
		  // 重置表单
		  this.resetApplyForm()
		  // 关闭报名弹窗
		  this.closeApplyModal()
		  // 显示成功弹窗
		  this.$refs.successPopup.open()
	  }
      
    },
    
    // 关闭成功弹窗
    closeSuccessPopup() {
      this.$refs.successPopup.close()
    },
    
    // 重置报名表单
    resetApplyForm() {
      this.applyForm = {
        name: '',
        idCard: '',
        college: '',
        major: '',
        targetCollege: '',
        targetCollegeId: '',
        targetMajor: '',
        targetMajorId: '',
        phone: '',
        email: '',
        transcript: null,
        certificate: null,
        agreed: false
      }
    },
    
    // 预览资料
    previewMaterial(item) {
      uni.showToast({
        title: `预览: ${item.name}`,
        icon: 'none'
      })
    },
    
    // // 验证身份证号
    // validateIdCard(idCard) {
    //   const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    //   return reg.test(idCard)
    // },
    
    // 验证手机号
    validatePhone(phone) {
      const reg = /^1[3-9]\d{9}$/
      return reg.test(phone)
    },
    
    // 验证邮箱
    validateEmail(email) {
      const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      return reg.test(email)
    }
  }
}
</script>

<style lang="scss">
.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  
  .particle {
    position: absolute;
    border-radius: 50%;
    animation: float 15s infinite linear;
  }
}
/* 添加错误提示样式 */
.error-message {
  color: #f56c6c;
  font-size: 24rpx;
  padding-left: 20rpx;
  margin-bottom: 20rpx;
}
@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
  }
}

.upgrade-page {
  position: relative;
  // height: 100vh;
  overflow: hidden;
  background: linear-gradient(to bottom, #f0f4f8, #d9e2ec);
  
  .glass-card {
    position: relative;
    // margin: 20px;
    // background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
    
    .card-header {
      padding: 20px 20px 10px;
      
      .title {
        font-size: 22px;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 5px;
      }
      
      .glowing-line {
        height: 3px;
        width: 50px;
        background: linear-gradient(to right, #FF5C8D, #764ba2);
        border-radius: 3px;
      }
    }
    
    .tab-bar {
      display: flex;
      border-bottom: 1px solid rgba(0,0,0,0.05);
      padding: 0 20px;
      
      .tab-item {
        flex: 1;
        text-align: center;
        padding: 15px 0;
        position: relative;
        
        text {
          font-size: 16px;
          color: #666;
          transition: all 0.3s;
        }
        
        .indicator {
          position: absolute;
          bottom: -1px;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 3px;
          background: linear-gradient(to right, #FF5C8D, #764ba2);
          transition: all 0.3s;
          border-radius: 3px;
        }
        
        &.active {
          text {
            color: #333;
            font-weight: bold;
          }
          
          .indicator {
            width: 50%;
          }
        }
      }
    }
    
    .tab-content {
      padding: 15px;
      
      &.college-list {
        .search-box {
          margin-bottom: 15px;
        }
        
        .filter-tags {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 15px;
          
          .tag {
            padding: 6px 12px;
            background: #f5f7fa;
            border-radius: 15px;
            margin-right: 8px;
            margin-bottom: 8px;
            font-size: 12px;
            color: #666;
            transition: all 0.3s;
            
            &.active {
              background: linear-gradient(to right, #FF5C8D, #764ba2);
              color: white;
            }
          }
        }
        
        .college-container {
          .college-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background: white;
            border-radius: 12px;
            margin-bottom: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            
            .college-logo {
              width: 50px;
              height: 50px;
              margin-right: 15px;
              border-radius: 8px;
              background: #f5f7fa;
            }
            
            .college-info {
              flex: 1;
              
              .name {
                font-size: 16px;
                font-weight: bold;
                color: #333;
                display: block;
                margin-bottom: 5px;
              }
              
              .meta {
                display: flex;
                
                text {
                  font-size: 12px;
                  color: #999;
                  margin-right: 10px;
				  display: -webkit-box;
				    -webkit-line-clamp: 3; /* 控制显示的行数 */
				    -webkit-box-orient: vertical;
				    overflow: hidden;
				    text-overflow: ellipsis;
                }
              }
              
              .apply-status {
                margin-top: 5px;
                
                .status {
                  font-size: 12px;
                  padding: 2px 8px;
                  border-radius: 10px;
                  background: #f5f7fa;
                  color: #666;
                  
                  &.applied {
                    background: #e6f7ff;
                    color: #1890ff;
                  }
                  
                  &.pending {
                    background: #fff7e6;
                    color: #fa8c16;
                  }
                  
                  &.approved {
                    background: #f6ffed;
                    color: #52c41a;
                  }
                  
                  &.rejected {
                    background: #fff1f0;
                    color: #f5222d;
                  }
                }
              }
            }
          }
          
          .load-more, .no-more {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px 0;
            font-size: 14px;
            color: #999;
            
            .loading-icon {
              width: 18px;
              height: 18px;
              margin-right: 8px;
            }
          }
        }
      }
      
      // 政策解读样式
      &.policy-list {
        .policy-section {
          margin-bottom: 20px;
          background: white;
          border-radius: 12px;
          padding: 15px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.05);
          
          .section-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
            position: relative;
            padding-left: 10px;
            
            &::before {
              content: '';
              position: absolute;
              left: 0;
              top: 4px;
              height: 16px;
              width: 4px;
              background: linear-gradient(to bottom, #FF5C8D, #764ba2);
              border-radius: 2px;
            }
          }
          
          .section-content {
            display: flex;
            flex-direction: column;
            
            text {
              font-size: 14px;
              color: #666;
              margin-bottom: 8px;
              line-height: 1.6;
            }
          }
          
          .timeline {
            margin-top: 15px;
            
            .timeline-item {
              display: flex;
              padding-bottom: 15px;
              position: relative;
              
              &:last-child {
                padding-bottom: 0;
                
                .timeline-dot::after {
                  display: none;
                }
              }
              
              .timeline-dot {
                width: 12px;
                height: 12px;
                background: linear-gradient(to right, #FF5C8D, #764ba2);
                border-radius: 50%;
                margin-right: 10px;
                position: relative;
                flex-shrink: 0;
                margin-top: 4px;
                
                &::after {
                  content: '';
                  position: absolute;
                  left: 5px;
                  top: 12px;
                  width: 2px;
                  height: calc(100% - 12px);
                  background: #e8e8e8;
                }
              }
              
              .timeline-content {
                flex: 1;
                
                .timeline-date {
                  font-size: 13px;
                  color: #FF5C8D;
                  font-weight: bold;
                  display: block;
                  margin-bottom: 2px;
                }
                
                .timeline-title {
                  font-size: 15px;
                  font-weight: bold;
                  color: #333;
                  display: block;
                  margin-bottom: 5px;
                }
                
                .timeline-desc {
                  font-size: 13px;
                  color: #666;
                  line-height: 1.5;
                }
              }
            }
          }
        }
        
        .quick-apply {
          background: linear-gradient(to right, #FF5C8D, #764ba2);
          color: white;
          padding: 12px 15px;
          border-radius: 8px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20px;
          box-shadow: 0 4px 12px rgba(255, 92, 141, 0.3);
          
          text {
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
      
      // 备考资料样式
      &.materials {
        .material-category {
          margin-bottom: 20px;
          background: white;
          border-radius: 12px;
          padding: 15px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.05);
          
          .category-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            position: relative;
            padding-left: 10px;
            
            &::before {
              content: '';
              position: absolute;
              left: 0;
              top: 4px;
              height: 16px;
              width: 4px;
              background: linear-gradient(to bottom, #FF5C8D, #764ba2);
              border-radius: 2px;
            }
          }
          
          .material-list {
            .material-item {
              display: flex;
              align-items: center;
              padding: 12px 0;
              border-bottom: 1px solid #f0f0f0;
              
              &:last-child {
                border-bottom: none;
              }
              
              .material-icon {
                width: 24px;
                height: 24px;
                margin-right: 12px;
              }
              
              .material-info {
                flex: 1;
                
                .material-name {
                  font-size: 14px;
                  color: #333;
                  display: block;
                  margin-bottom: 4px;
                }
                
                .material-size {
                  font-size: 12px;
                  color: #999;
                }
              }
              
              .download-btn {
                background: #f5f7fa;
                color: #666;
                font-size: 12px;
                padding: 4px 10px;
                border-radius: 12px;
              }
            }
          }
        }
      }
    }
  }
  
  // 报名弹窗样式
  .apply-popup {
    background: white;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    max-height: 70vh;
    
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      .popup-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
    }
    
    .form-container {
      max-height: calc(70vh - 100px);
      margin-bottom: 15px;
      
      .form-item {
        margin-bottom: 15px;
        position: relative;
        
        .form-label {
          font-size: 14px;
          color: #666;
          display: block;
          margin-bottom: 8px;
        }
        
        .form-input {
          background: #f5f7fa;
          border-radius: 8px;
          padding: 12px 15px;
		  height: 90rpx;
          font-size: 14px;
          color: #333;
          width: 100%;
          box-sizing: border-box;
          
          &[mode=selector] {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
        
        &.upload-item {
          .upload-list {
            display: flex;
            gap: 10px;
            
            .upload-btn {
              flex: 1;
              background: #f5f7fa;
              border-radius: 8px;
              padding: 12px;
              text-align: center;
              font-size: 14px;
              
              .upload-tip {
                font-size: 12px;
                color: #999;
                margin-left: 5px;
              }
              
              .upload-success {
                font-size: 12px;
                color: #52c41a;
                margin-left: 5px;
              }
            }
          }
        }
      }
      
      .agreement {
        margin-top: 20px;
        font-size: 12px;
        color: #666;
        display: flex;
        align-items: center;
        
        .agreement-link {
          color: #1890ff;
        }
      }
    }
    
    .popup-footer {
      .submit-btn {
        background: linear-gradient(to right, #FF5C8D, #764ba2);
        color: white;
        border-radius: 25px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        font-weight: bold;
        &[disabled] {
          opacity: 0.6;
        }
      }
    }
  }
  
  // 成功弹窗样式
  .success-popup {
    background: white;
    border-radius: 15px;
    padding: 30px 25px;
    width: 280px;
    text-align: center;
    
    .success-icon {
      width: 60px;
      height: 60px;
      margin-bottom: 15px;
    }
    
    .success-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 10px;
    }
    
    .success-desc {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
      margin-bottom: 20px;
    }
    
    .success-btn {
      background: linear-gradient(to right, #FF5C8D, #764ba2);
      color: white;
      border-radius: 25px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
  }
}
</style>